<template>
	<view class="calendar">
		<!-- <view class="month">
			<text>{{ year }}</text>
			<text>{{chooseMonth}}月</text>
		</view>
		<view class="month-list">
			<view :class="setChooseClass(item)" @click="turning(item)" v-for="item in monthArr">{{item}}月</view>
		</view> -->

    <view class="header-container">
      <view class="date-range">{{ dateRange }}</view>
      <view class="back-current" @click="backToCurrentMonth">回到本月</view>
    </view>

    <view class="month-container" @touchstart="handleTouchStart" @touchmove.prevent @touchend="handleTouchEnd">
      <view v-for="(item, index) in displayedMonths" :key="index" class="month-item"
        :style="getMonthStyle(item.year, item.month)" @click="selectMonth(item.year, item.month)">
        {{ item.month }}月
      </view>
    </view>

		<!-- 月统计信息 -->
		<view class="month-info">
			<view class="info-grid">
				<view class="info-value">{{monthStatis.workTime}}</view>
				<view class="info-label">平均工时</view>
			</view>
			<view class="info-grid">
				<view class="info-value">{{monthStatis.chuqin}}</view>
				<view class="info-label">出勤天数</view>
			</view>
			<!-- <view class="info-grid">
				<view class="info-value">2</view>
				<view class="info-label">出勤班次</view>
			</view> -->
			<view class="info-grid">
				<view class="info-value">{{monthStatis.xiuxi}}</view>
				<view class="info-label">休息天数</view>
			</view>
			<view class="info-grid">
				<view :class="setClass(monthStatis.chidao)">{{monthStatis.chidao}}</view>
				<view class="info-label">迟到</view>
			</view>
			<view class="info-grid info-grid-info">
				<view :class="setClass(monthStatis.zaotui)">{{monthStatis.zaotui}}</view>
				<view class="info-label">早退</view>
			</view>
			<view class="info-grid info-grid-info">
				<view :class="setClass(monthStatis.queka)">{{monthStatis.queka}}</view>
				<view class="info-label">缺卡</view>
			</view>
			<view class="info-grid info-grid-info">
				<view :class="setClass(monthStatis.kuanggong)">{{monthStatis.kuanggong}}</view>
				<view class="info-label">旷工</view>
			</view>
			<view class="info-grid info-grid-info">
				<view :class="setClass(monthStatis.waiqin)">{{monthStatis.waiqin}}</view>
				<view class="info-label">外勤</view>
			</view>
			<!-- <view class="info-grid info-grid-info">
				<view class="info-value">0</view>
				<view class="info-label">加班</view>
			</view> -->
			<view class="info-grid info-grid-info">
				<view :class="setClass(monthStatis.buka)">{{monthStatis.buka}}</view>
				<view class="info-label">补卡申请</view>
			</view>
		</view>
		<!-- 查看详情按钮 -->
		<view class="detail">
			查看详情
		</view>
	</view>
</template>

<script>
	export default {
		name: 'month-calendar',
		props: {
			// 月打卡数据
			monthStatis: {
				type: Object,
				default: {}
			},
		},
		data() {
			return {
				monthArr: [], // 月
				year: new Date().getFullYear(),
				month: new Date().getMonth() + 1,
				chooseMonth: new Date().getMonth() + 1,
        currentYear: new Date().getFullYear(),
        currentStartMonth: 1,
        selectedYear: null,
        selectedMonth: null,
        touchStartX: 0,
			}
		},
		created() {
			 this.backToCurrentMonth()
		},
    computed: {
      displayedMonths () {
        return Array.from({ length: 6 }, (_, i) => {
          const month = this.currentStartMonth + i
          const year = month > 12 ? this.currentYear + 1 : this.currentYear
          return { year: month > 12 ? year : this.currentYear, month: month > 12 ? month - 12 : month }
        })
      },
      dateRange () {
        return `${this.selectedYear} | ${this.selectedMonth}月`
      }
    },
		mounted() {
			if(this.month < 7) {
				this.monthArr = [1,2,3,4,5,6];
			}else {
				this.monthArr = [7,8,9,10,11,12];
			}
		},
		methods: {
			setClass(num) {
				if(num > 0) {
					return 'info-value info-value-warning'
				}else {
					return 'info-value'
				}
			},
			setChooseClass(month) {
				if(month == this.chooseMonth) {
					return 'month-item choose-month'
				}else {
					return 'month-item'
				}
			},
			// 切换月份
			turning(month) {
				this.chooseMonth = month;    
        this.$emit('monthChange', `${this.year}-${this.chooseMonth}`);
			},
			// 切换年
			turningYear(event) {

			},
      handleTouchStart (e) {
        this.touchStartX = e.touches[0].clientX
      },
      handleTouchEnd (e) {
        const touchEndX = e.changedTouches[0].clientX
        const diffX = touchEndX - this.touchStartX
        const threshold = 50 // 滑动阈值

        if (Math.abs(diffX) > threshold) {
          diffX > 0 ? this.handleSwipeLeft() : this.handleSwipeRight()
        }
      },
      handleSwipeRight () {
        let newStart = this.currentStartMonth + 6
        let newYear = this.currentYear
        if (newStart > 12) {
          newYear += 1
          newStart -= 12
        }
        this.currentYear = newYear
        this.currentStartMonth = newStart
        this.selectedYear = newYear
        this.selectedMonth = newStart
        this.$emit('monthChange', `${this.selectedYear}-${this.selectedMonth}`);
      },
      handleSwipeLeft () {
        let newStart = this.currentStartMonth - 6
        let newYear = this.currentYear
        if (newStart < 1) {
          newYear -= 1
          newStart += 12
        }
        this.currentYear = newYear
        this.currentStartMonth = newStart
        this.selectedYear = newYear
        this.selectedMonth = newStart
        this.$emit('monthChange', `${this.selectedYear}-${this.selectedMonth}`);
      },
      // 新增方法：获取月份样式
      getMonthStyle (year, month) {
        const currentDate = new Date()
        const isCurrent = year === currentDate.getFullYear() && month === currentDate.getMonth() + 1
        const isSelected = year === this.selectedYear && month === this.selectedMonth

        return {
          color: isSelected ? '#1890ff' : (isCurrent ? '#007aff' : '#000'),
          fontWeight: isSelected ? 'bold' : 'normal',
          transition: 'all 0.3s'
        }
      },
      backToCurrentMonth () {
        const current = new Date()
        this.currentYear = current.getFullYear()
        this.currentStartMonth = current.getMonth() + 1 <= 6 ? 1 : 7
        this.selectedYear = current.getFullYear()
        this.selectedMonth = current.getMonth() + 1
        this.$emit('monthChange', `${this.selectedYear}-${this.selectedMonth}`);
      },
      selectMonth (year, month) {
        this.currentYear = year
        this.selectedYear = year
        this.selectedMonth = month
        this.$emit('monthChange', `${year}-${month}`);
      },
		}
	}
</script>

<style lang="scss" scoped>
	.calendar {
		padding: 24rpx;
	}
	.month text {
		font-weight: 500;
		margin-right: 20rpx;
	}
	.month-list {
		display: flex;
		justify-content: space-between;
		padding: 24rpx;
		border-bottom: 1px solid #eee;
	}
	.month-item {
		font-size: 24rpx;
		width: 56rpx;
		height: 56rpx;
		line-height: 56rpx;
		text-align: center;
		color: #333;
	}
	.choose-month {
		background-color: #1989FA;
		color: #fff;
		border-radius: 50%;
	}
	.month-info {
		display: flex;
		flex-wrap: wrap;
		padding: 30rpx 0 0 0;
		border-bottom: 1px solid #eee;
	}
	.info-grid-info .info-value,.info-label{
		color: #C5C9CC;
	}
	.info-grid {
		width: 33%;
		height: 150rpx;
		text-align: center;
	}
	.info-value {
		color: #000;
		font-size: 38rpx;
		font-weight: 500;
		margin-bottom: 4rpx;
	}
	.info-value-warning {
		color: #FE9F00 !important;
	}
	.info-label {
		font-size: 24rpx;
		color: #798188;
	}
	.detail {
		text-align: center;
		color: #798188;
		font-size: 28rpx;
		padding: 20rpx 0;
	}


  .header-container {
    text-align: left;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;

    .date-range {
      width: 50%;
    }

    .back-current {
      color: #909399;
      width: 50%;
      text-align: right;
      font-size: 14px;
    }
  }

  .month-container {
    margin-top: 10px;
    height: 70rpx;
    display: flex;
    line-height: 70rpx;
    border-bottom: 1px solid #eee;

    .month-item {
      font-size: 28rpx;
      width: 16.66%;
      text-align: center;
      transition: all 0.3s;
    }
  }
</style>
